$(function(){
	
			//存储图片和视屏资源
		    //视频或图片的地址链接
		    var ele = [
		    	'videos/GFRIEND.mp4',
		        'videos/20200120.mp4',
		    	'img/66.jpg',
		    	'img/55.jpg',
		        'img/44.jpg',   
		    ]
			
			var $a = $(".buttons a");
			var $s = $(".buttons span");
			var cArr = [];
			
			for (var i=0;i<ele.length;i++) {
				cArr.unshift("p"+(i+1));
			}
			
	        //初始化追加的dome元素
	        addDoem()

		    //截取链接的最后一个后缀格式
		    function getExt(name) {
		        const parts = name.split('.')
		        return parts[parts.length - 1]
		    }

		    //判断文件格式类型
		    function mediaType(name) {
		        const ext = getExt(name)
		        // console.log('this',this)
		        if (['jpg', 'png'].includes(ext)) {
		            return 'image'
		        } else if (['mkv', 'mp4', 'ogg', 'avi'].includes(ext)) {
		            return 'video'
		        } else {
		            return 'unknown'
		        }
		    }	
			
		    //追加dome元素
		    function addDoem() {
		 
		        var imgList = '';
		        
		        //先动态拼接dome元素，判断图片或是视频
		        for (let i = 0; i < ele.length; i++) {
		 
		            if (mediaType(ele[i]) == 'image') {
		 
		                imgList += " <li class='"+cArr[i]+"'> "
		 
		                imgList += "<a href='#'><img src='"+ele[i]+"' alt='' /></a>";
		 
		                imgList += "</li>"
		 
		            } else {
		                imgList += " <li class='"+cArr[i]+"'> "
		 
		                imgList += "<a href='#'><video preload controls width='741px' height='270px'>" 
		                
		                imgList += "<source src='"+ele[i]+"' type='video/mp4'></video></a>"
		 
		                imgList += "</li>"
		            }
		        }
		        //把判断出来的dome元素分别追加到bootstrap下面的ul容器下
		        $('ul').append(imgList);
		        
		        
		        for(var i=0;i<ele.length;i++){
		        	if(i==0){
		        		$(".buttons").append("<a href='javascript:;'><span class='blue'></span></a>");
		        	}else{
		        		
		        		$(".buttons").append("<a href='javascript:;'><span></span></a>");
		        	}
		        	
		        }

		    }
		    
			
			var index = 0;
			$(".next").click(
				function() {
					nextimg();
				}
			)
			$(".prev").click(
				function() {
					previmg();
				}
			)
			//上一张
			function previmg() {
				cArr.unshift(cArr[ele.length-1]);
				cArr.pop();
				//i是元素的索引，从0开始
				//e为当前处理的元素
				//each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
				$("li").each(function(i, e) {
					$(e).removeClass().addClass(cArr[i]);
				})
				index--;
				if(index < 0) {
					index = ele.length;
				}
				show();
			}

			//下一张
			function nextimg() {
				cArr.push(cArr[0]);
				cArr.shift();
				
				//判断该元素下是否存在video标签
				var isvideo=$(".p3").is(':has(video)');//true 为存在
				
				$("li").each(function(i, e) {
					$(e).removeClass().addClass(cArr[i]);
				})
				index++;
				if(index > ele.length) {
					index = 0;
				}
				show();
				
				if(isvideo){
					//得到视屏元素
					var videoele=$(".p3"+" a video");	
					currentVideo(videoele[0]);
					
				}			
				
				
			}
			
			
		//当前判断的video
	    function currentVideo(vid) {
	    	
	    	//播放
			vid.play(); 

	        //监听播放开始
	        vid.addEventListener('play',function(){
	        	clearInterval(timer);
	        });
	        //监听播放结束
	        vid.addEventListener('ended', function () {
	        	timer = setInterval(nextimg, 4000);
	        	
	        });
	    	
	    }		
			
			
			
			

			//通过底下按钮点击切换
			$a.each(function() {
				$(this).click(function() {
					var myindex = $(this).index();
					var b = myindex - index;
					if(b == 0) {
						return;
					} else if(b > 0) {
						/*
						 * splice(0,b)的意思是从索引0开始,取出数量为b的数组
						 * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
						 * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
						 * 这时候原本的数组也将这部分数组进行移除了
						 * 再把移除的数组添加的原本的数组的后面
						 */
						var newarr = cArr.splice(0, b);
						cArr = $.merge(cArr, newarr);
						$("li").each(function(i, e) {
							$(e).removeClass().addClass(cArr[i]);
						})
						index = myindex;
						show();
					} else if(b < 0) {
						/*
						 * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
						 * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
						 * 也就是从原本的照片到需要点击的照片的数组
						 * 然后将原本的数组跟取出的数组进行拼接
						 * 再次倒序,使原本的倒序变为正序
						 */
						cArr.reverse();
						var oldarr = cArr.splice(0, -b)
						cArr = $.merge(cArr, oldarr);
						cArr.reverse();
						$("li").each(function(i, e) {
							$(e).removeClass().addClass(cArr[i]);
						})
						index = myindex;
						show();
					}
				})
			})

			//改变底下按钮的背景色
			function show() {
				$($s).eq(index).addClass("blue").parent().siblings().children().removeClass("blue");
			}

			//点击class为p2的元素触发上一张照片的函数
			$(document).on("click", ".p2", function() {
				previmg();
				return false; //返回一个false值，让a标签不跳转
			});

			//点击class为p4的元素触发下一张照片的函数
			$(document).on("click", ".p4", function() {
				nextimg();
				return false;
			});

			//			鼠标移入box时清除定时器
			$(".box").mouseover(function() {
				clearInterval(timer);
			})

			//			鼠标移出box时开始定时器
			$(".box").mouseleave(function() {
				timer = setInterval(nextimg, 4000);
			})

			//			进入页面自动开始定时器
			timer = setInterval(nextimg, 4000);
			
			
	
	
	
})

	
	
	
	
	
	

